/**
* @description: 待办作业-工作列表
* @author: zhaohui
* @data:2023年6月12日
* @remark:
**/
<template>
	<view class="task-monitor">
		<nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack">
			<img slot="iconfont" src="../../../static/img/sx.png" alt="" @click="showSelectContent=true">
		</nav-bar>
		<view class="header-bar">
			<view>
				<view class="patrol-search">
					<van-search disabled v-model="searchValue" left-icon="" right-icon="search" placeholder="请输入"
						@click="showSearch=true" @cancel="onSearch('')" />
				</view>
				<view class="task-main">
					<view class="task-list-container">
						<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
							<van-list v-if="progressList.length > 0" v-model="isLoading" :finished="finished"
								finished-text="没有更多了" @load="loadMore">
								<view class="task-list" v-for="(item,index) in progressList" :key="index"
									@click="jump(item)">
									<view class="task-top">
										<img src="../../../static/img/light.png" alt="">
										<text class="equip-title">{{ item.PLANNAME }}</text>
										<!-- <text :class="equip-state-wc" >
											{{ item.PLANMAINSTATENAME }}
										</text> -->
										<text class="equip-state-other">
											{{ planState === "0" ? item.PLANMAINSTATENAME : item.PLANSTATENAME }}
										</text>
									</view>
									<hr class="patrol-hr">
									<ul class="task-list-main">
										<li>
											<text class="task-title">计划时间：</text>
											<text class="task-titles">{{item.PLANTIME}}</text>
										</li>
										<li style="display: flex;justify-content:space-between;">
											<div style="flex:1;">
												<text class="task-title">作业负责人：</text>
												<text class="task-titles">{{ item.WORKDIRECTORNAME }}</text>
											</div>
											<div style="flex:1;">
												<text class="task-title">作业内容类型：</text>
												<text class="task-titles">{{ item.WORKCONTENTTYPENAME }}</text>
											</div>
										</li>
										<li>
											<text class="task-title">作业站点：</text>
											<text class="task-titles">{{ item.WORKADRESSNAME }}</text>
										</li>
									</ul>

								</view>

							</van-list>
							<van-empty v-else description="暂无数据" />
						</van-pull-refresh>
					</view>
				</view>

			</view>

		</view>

		<!--弹出搜索页-->
		<van-popup v-model="showSearch" position="right">
			<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
		</van-popup>
		<!--弹出筛选页-->
		<van-popup v-model="showSelectEquipment" position="right">
			<search-equipment :equObj="selectEqumentOption" @cancel="equCancel" :selected.sync="equKeys"
				@changeSelected="changeEquSelected($event)" />
		</van-popup>
		<van-popup v-model="showSelectContent" position="right" :style="{width:'80%'}">
			<select-content :subParam="subParam" @selectTimeClick="timeClick" @determine="selectContentDetermine"
				@selectContentClear="selectContentClear"></select-content>
		</van-popup>

		<!--弹出时间筛选弹窗使用-->
		<!-- <van-calendar v-model="showCalendar" color="#417ADC" @confirm="onDatetimeConfirm" /> -->
		<van-popup v-model="showCalendar" position="bottom" style="width: 100%;">
			<van-datetime-picker v-model="currentDate"  @cancel="showCalendar = false" type="date" title="选择年月日" @confirm="onDatetimeConfirm" />
		</van-popup>
	</view>
</template>
<script>
	import navBar from '../../../components/common/nav-bar'
	import searchEquMatch from '../../common/searchEquMatch'
	import searchEquipment from '../../common/selectEquipment'
	import selectContent from '../common/selectContent.vue'
	import { mapGetters } from "vuex";
	import { Toast } from 'vant';
	export default {
		name: '',
		components: {
			navBar,
			searchEquMatch,
			searchEquipment,
			selectContent
		},
		props: {},
		data() {
			return {
				backgroundColor: '#417ADC',
				title: '工作列表',
				current: 0,
				progressList: [],
				planName: '',
				planTime: '',
				mantleName: '',
				typeName: '',
				showDatetimePicker: false,
				currentDate: new Date(),
				showSearch: false,
				searchValue: '',
				refreshing: false, // 是否正在刷新
				isLoading: false,
				finished: false,
				total: 0, // 总条数
				page: 1,
				limit: 20,
				approvalTotal: 0,
				approvalPage: 1,
				showSelectEquipment: false, //筛选弹窗
				selectEqumentOption: {
					equType: "",
					siteId: "",
					isCheckbox: true
				},
				equKeys: [],
				showSelectContent: false, //筛选弹窗
				showCalendar: false, //时间弹窗
				subParam: {
					planStartTime: "",
					planEndTime: "",
					radio: ""
				},
				planState: "", //待办0 已办1
				timeSelectType: "" //筛选弹窗使用startTime，endTime
			}
		},
		computed: {
			...mapGetters(["userData"])
		},
		watch: {},
		onLoad(option) {
			this.planState = option.planState

		},
		onShow() {
			if (this.planState === "0") {
				this.title = "待办作业"
			} else if (this.planState === "1") {
				this.title = "已办作业"
			} else if (this.planState === "2") {
				this.title = "作业记录"
			}
			this.getJobList()
		},
		methods: {
			goBack() {
				uni.navigateBack()
				// uni.navigateTo({
				// 	url: '/pages/standardizedOperation/index'
				// })
			},
			onSearch(searchValue) {
				this.searchValue = searchValue
				this.onRefresh()
				this.showSearch = false
			},
			getJobList() {
				let param = {
					userId: this.userData.userId,
					planName: this.searchValue,
					workContentType: this.subParam.radio,
					startTime: this.subParam.planStartTime,
					endTime: this.subParam.planEndTime,
					planState: this.planState
				}
				this.$apiRequest.bzhzyApi.getJobListStandardization(param).then(res => {
					this.refreshing = false
					this.progressList = res.data.rows
				}).catch(error => {
					this.refreshing = false
				})
			},
			loadMore() {
				if (this.total > this.progressList.length) {
					this.page = this.page + 1
					this.getJobList()
				} else {
					this.finished = true
				}
			},
			pickerFormatter(type, val) {
				if (type === "year") return val + "年";
				if (type === "month") return val + "月";
				if (type === "day") return val + "日";
				if (type === "hour") return val + "时";
				if (type === "minute") return val + "分";
			},
			onRefresh() {
				this.refreshing = true
				this.finished = false
				this.page = 1
				this.progressList = []
				this.getJobList()
			},
			onSearch(searchValue) {
				this.searchValue = searchValue
				this.onRefresh()
				this.showSearch = false
			},
			/**
			 * isMyInitiate用于区分是待办作业进入还是其他页面进入，-1位待办作业进入
			 * planState === 0 是待办作业进入 isMyInitiate改为-1  其余的页面进入isMyInitiate改为1
			 * @param {Object} item
			 */
			jump(item) {
				uni.navigateTo({
					url: `/pages/standardizedOperation/assignmentDetails/assignmentDetails?id=${item.OBJID}&isMyInitiate=${this.planState === "0"?"-1":"1"}`
				})
			},
			handleSelectUser(t) {
				this.showSelectUser = true
				this.staffType = t
				if (this.staffType == 'mantle') {
					// 作业负责人id
					this.staffList = {
						ids: !this.mantleName ? [] : this.mantleUid,
						text: this.mantleName
					}
				} else if (this.staffType == 'guardian') {
					// 作业监护人
					this.staffList = {
						ids: !this.guardianName ? [] : this.guardianUid,
						text: this.guardianName
					}
				} else {
					// 班组成员
					this.staffList = {
						ids: !this.memberName ? [] : this.memberUid,
						text: this.memberName
					}
				}
			},
			// 选择设备
			changeEquSelected(value) {
				this.showSelectEquipment = false;
				if (this.selectEqumentOption.isCheckbox) {
					// 多选
					// 返回数组
					this.typeColumns[this.staffIndex].equsCheckbox = value;
					this.typeColumns[this.staffIndex].equs = value.map(item => {
						return item.ORGID;
					});
					const equSelect = value.map(item => {
						return item.NAME;
					});
					this.typeColumns[this.staffIndex].equsText =
						equSelect.length > 0 ? `已选择 ${equSelect.length} 个` : "";

				} else {
					// 单选
					this.typeColumns[this.staffIndex].equsText = value.NAME;
					this.typeColumns[this.staffIndex].equs = [value.ORGID];
				}
			},
			handleSelectEqu(e, i) {
				if (this.siteObj.siteId) {
					this.selectEqumentOption = {
						equType: e.name,
						siteId: this.siteObj.siteId,
						isCheckbox: true
					};
					// this.equKeys = []
					this.staffIndex = i;
					this.equKeys = e.equsCheckbox;
					this.showSelectEquipment = true;
				} else {
					Dialog.alert({
						title: "提示",
						message: "请先选择巡视站点"
					}).then(() => {
						// on close
					});
				}
			},
			equCancel() {
				this.showSelectEquipment = false;
			},
			/**
			 * 时间弹窗
			 */
			timeClick(type) {
				this.showCalendar = true
				this.timeSelectType = type //startTime，endTime
			},
			/**
			 * 筛选条件确认
			 */
			selectContentDetermine() {
				this.showSelectContent = false
				this.getJobList()
			},
			/**
			 * 筛选条件重置
			 */
			selectContentClear() {
				this.subParam = {
					planStartTime: "",
					planEndTime: "",
					radio: ""
				}
			},
			/**
			 * 时间弹窗确认
			 * @param {Object} date
			 */
			onDatetimeConfirm(date) {
				this.showCalendar = false;
				if(this.timeSelectType === 'startTime'){
					this.subParam.planStartTime = this.formatDate(date)
				}else {
					this.subParam.planEndTime = this.formatDate(date)
				}
				if(this.subParam.planEndTime && this.getTime(this.subParam.planEndTime) <this.getTime(this.subParam.planStartTime)){
					this.subParam.planEndTime = ''
					Toast('计划结束时间不能早于计划开始时间')
				}
				
				// if (date.length > 1) {
				// 	const [start, end] = date;
					
				// 	this.showCalendar = false;
				// 	this.subParam.planStartTime = this.formatDate(start)
				// 	this.subParam.planEndTime = this.formatDate(end)
				// } else {
				// 	const [start] = date;
				// 	this.showCalendar = false;
				// 	this.subParam.planStartTime = this.formatDate(start)
				// 	// this.subParam.planEndTime = this.formatDate(start)
				// }
			},
			formatDate(date) {
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
			},
			getTime(time){
				let date = new Date(time)
				return date.getTime()
			},
		}
	}
</script>
<style scoped lang="scss">
	.task-monitor {
		width: 100vw;
		height: 100vh;
		background: #f2f6fa;
		overflow: hidden;

		.header {
			img {
				width: px2vw(48);
				margin-right: px2vw(40);
			}
		}

		.header-bar {
			height: px2vh(250);

			.menu {
				width: px2vw(1020);
				height: px2vh(180);
				border: 1px solid #ffffff;
				border-radius: 10px;
				box-shadow: 0 0 18px 2px #fff inset;
				//background-image: url('../../../../static/img/borderR.png');
				background-color: rgba(243, 247, 255, 0.95);
				//background-size: px2vw(1020) px2vh(220);
				margin: 0 auto;
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				li {
					position: relative;
					height: 100%;
					display: flex;
					align-items: center;

					.right-box {
						text-align: center;

						.menu-num {
							display: block;
							font-size: px2vw(54);
							font-weight: bold;
							color: #333;
						}

						.menu-state {
							font-size: px2vw(36);
							color: #333;
						}

						.selectmenu {
							color: #417adc;
						}
					}

					.sj {
						width: px2vw(78);
						height: px2vh(66);
						position: absolute;
						bottom: 0;
						//right: px2vw(40);
						left: 50%;
						transform: translate(-50%, 78%);
						background-image: url('../../../static/img/sj.png');
						background-size: px2vw(78) px2vh(66);
					}
				}
			}
		}

		.patrol-search {
			width: px2vw(1020);
			height: 38px;
			margin: px2vw(20) px2vw(30) 0 px2vw(30);
			box-shadow: 0 px2vw(2) px2vw(20) rgba(219, 219, 219, 1);

			.van-search {
				padding: 0 0;
				height: 38px;
				border-radius: px2vw(20) !important;
			}

			.van-search__content {
				background: #fff;
				height: 38px;
				border-radius: px2vw(20) !important;
			}

			/deep/.van-field__control {
				height: 30px;
			}
		}

		.task-main {
			height: calc(100vh - 60px);
			overflow: auto;
			position: relative;
			margin-bottom: px2vw(30);

			.task-list {
				width: px2vw(1020);
				padding-bottom: px2vh(30);
				background: #fff;
				border-radius: px2vw(20) px2vh(20);
				margin-top: px2vh(30);
				margin-left: px2vw(30);
				margin-bottom: px2vh(30);

				.task-top {
					width: calc(100% - #{px2vw(80)});
					margin-left: px2vw(40);
					height: px2vh(140);

					img {
						width: px2vw(64);
						height: px2vw(64);
						margin-top: px2vh(40);
						float: left;
					}

					.equip-title {
						color: #333;
						font-size: px2vw(48);
						width: px2vw(670);
						height: px2vh(48);
						line-height: px2vh(48);
						float: left;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: px2vh(48);
						margin-left: px2vw(25);
					}

					.equip-state-wc,
					.equip-state-wzx,
					.equip-state-zxz,
					.equip-state-other,
					.equip-state-cx {
						display: flex;
						justify-content: center;
						align-items: center;
						width: px2vw(150);
						height: px2vh(50);
						font-size: px2vw(32);
						border-radius: px2vw(10);
						margin-top: px2vh(48);
						margin-left: px2vw(27);
						float: left;
					}

					// 已完工/审批通过
					.equip-state-wc {
						color: #3cda68;
						background: rgba(60, 218, 104, 0.1);
					}

					// 未执行/待审批
					.equip-state-wzx {
						color: #ff7070;
						background: rgba(255, 112, 112, 0.1);
					}

					// 执行中/审批拒绝
					.equip-state-zxz {
						color: #ffad0e;
						background: rgba(255, 180, 0, 0.1);
					}

					.equip-state-other {
						color: #417ADC;
						background: rgba(65, 122, 220, 0.1);
					}

					// 已作废/已撤销
					.equip-state-cx {
						color: #999;
						background: #eee;
					}
				}

				.patrol-hr {
					width: px2vw(940);
					border: px2vh(1) solid #e5e5e5;
					margin-left: px2vw(40);
				}
			}

			.task-list-main {
				width: px2vw(940);
				//height: px2vh(266);
				margin-left: px2vw(40);
				padding-bottom: px2vh(30);

				li {
					margin-top: px2vh(30);
					font-size: px2vw(36);

					.task-title {
						color: #666;
					}

					.task-titles {
						color: #333;
					}
				}
			}

			.task-hr {
				width: px2vw(940);
				border: 0;
				border-bottom: px2vh(6) dashed #e5e5e5;
				margin-top: px2vh(14);
				margin-left: px2vw(40);
			}

			.by {
				position: absolute;
				width: px2vw(40);
				height: px2vh(40);
				border-radius: px2vw(100);
				left: px2vw(12);
				float: left;
				background: #f2f6fa;
			}

			.byr {
				position: absolute;
				width: px2vw(40);
				height: px2vh(40);
				border-radius: px2vw(100);
				right: px2vw(12);
				float: right;
				background: #f2f6fa;
			}

			.bottom-patrol {
				width: px2vw(940);
				height: px2vh(54);
				margin-left: px2vw(40);
				margin-top: px2vh(26);
				font-size: px2vw(32);

				.left-bottom-patrol {
					display: flex;
					justify-content: center;
					align-items: center;
					min-width: px2vw(300);
					padding: 2px 4px;
					//height: px2vh(54);
					background: #ecf1fb;
					float: left;
					text-align: center;
					color: #417adc;
					border-radius: px2vw(8);
				}

				.right-bottom-patrol {
					width: px2vw(120);
					height: px2vh(54);
					float: right;

					.patrol-btn {
						width: px2vw(120);
						height: px2vh(54);
						background: #417adc;
						float: right;
						//border-radius: px2vw(20);
					}

					/deep/.van-button--normal {
						padding: 0;
					}
				}
			}
		}
	}

	.mainwrap {
		height: calc(100vh - px2vw(383));
	}

	main {
		width: calc(100% - #{px2vw(60)});
		margin-left: px2vw(30);
		height: calc(100vh - #{px2vh(590)});
		overflow-x: auto;

		.commonbj {
			background-color: #fff;
			margin-bottom: px2vh(30);

			.custom-title {
				display: flex;
				align-items: center;

				img {
					width: px2vh(42);
					margin-right: px2vw(29);
				}
			}
		}

		.commontitle {
			font-size: px2vh(40);
			color: #666666;
			font-weight: bold;
			margin-top: px2vh(60);
			margin-bottom: px2vh(27);

			.addoption {
				float: right;
				height: px2vh(46);
				margin-top: px2vh(10);
				margin-right: px2vw(50);
			}
		}

		.isrequired::before {
			content: '*';
			color: #ff4355;
			display: inline-block;
		}

		.remark-info-container {
			padding: px2vh(70) px2vw(50);
			font-size: px2vw(42);
			color: #666666;
			border-radius: px2vw(20);
			overflow: hidden;
			background-color: #ffffff;
			margin-top: px2vh(40);
			margin-bottom: px2vh(40);

			.remark-wrap {
				border-radius: px2vw(20);

				.remark-text {
					height: px2vh(150);
				}
			}
		}
	}

	footer {
		height: px2vh(155);
		background: #f2f6fa;
		padding-top: px2vh(45);

		/deep/ .van-button {
			width: calc(100% - #{px2vw(60)});
			margin-left: px2vh(30);
			height: px2vh(120);
			color: #fff;
			background-color: #417adc;
			border: 1px solid #417adc;
			border-radius: px2vh(60);
		}
	}
</style>
